<template>
  <div class="cover" v-if="data && newChapters && chapters">
 
    <div class="item1">
      <h2>《{{ data.book_title }}》最新章节</h2>
      <ul>
        <li
          v-for="item in newChapters"
          :key="item._id"
          @click="handleChapter(item._id)"
        >
          <router-link to=""> {{ item.chapter_title }} </router-link>
        </li>
      </ul>
    </div>
    <div class="item1">
      <h2>《{{ data.book_title }}》正文卷</h2>
      <ul>
        <li
          v-for="item in chapters"
          :key="item._id"
          @click="handleChapter(item._id)"
        >
          <router-link to=""> {{ item.chapter_title }} </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  // props: ["chapters", "newChapters"],
  props: {
     data: {
      type: Object,
      default: null,
    },
    chapters: {
      type: Array,
      default: [],
    },
     newChapters: {
      type: Array,
      default: [],
    },
  },

  setup() {
    const router = useRouter();

    const handleChapter = (_id) => {
      router.push({ path: `/home/chapter/${_id}` });
    };

    return {
      handleChapter,
    };
  },
};
</script>

<style lang="scss" scoped>
.cover {
  border: 2px solid #88c6e5;
  margin-top: 15px;
  .item1 {
    padding: 3px;
    &:nth-of-type(1) {
      li {
        &:nth-last-of-type(3-n) {
          background-color: red;
        }
      }
    }
    h2 {
      height: 38px;
      line-height: 38px;
      text-align: center;
      font-size: 18px;
      color: #333;
      background-color: #c3dfea;
    }

    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        padding-left: 10px;
        height: 38px;
        line-height: 38px;
        width: 33%;
        border-bottom: 1px dashed #88c6e5;
        a {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
}
</style>